<!DOCTYPE html>
<html>
<script>
</script>
<head>
    <title>球队人员签到</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #container {
            position: absolute;
            top: 0;
            margin: 20px auto;
            text-align: center;
        }
        #header {
            font-size: 64px;
            margin-top: 20px;
            margin-bottom: 20px;
            color: rgb(244, 182, 244);
        }
        #task-container {
            background-color: #edecef;
            padding: 20px;
            width: 820px;
        }
        #input-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        #input-container input[type="text"] {
            flex-grow: 1;
            margin-right: 10px;
            padding: 5px;
            border: none;
            border-radius: 5px;
            background-color: lightgray;
        }
        #task-list {
            margin-bottom: 10px;
        }
        .task-item {
            font-size: 25px;
            display: flex;
            align-items: center;
            margin: 15px auto;
            height: 30px;
        }
        .task-item input[type="checkbox"] {
            margin-right: 10px;
        }
        #summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        #item-count {
            margin-left: 10px;
        }
        #filters {
            margin-top: 10px;
        }
        #filters button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            队员签到
        </div>
        <div id="task-container">
            <div id="input-container">
                <input type="text" id="task-input" placeholder="添加队员">
                <button onclick="addTask()">添加</button>
            </div>
            <div id="task-list"></div>
            <div id="summary">
                <div id="item-count"></div>
                <div id="filters">
                    <button onclick="showAll()">全部队员</button>
                    <button onclick="showActive()">未到</button>
                    <button onclick="showCompleted()">已到</button>
                </div>
                <button onclick="clearCompleted()">清除完成</button>
            </div>
        </div>
    </div>
    <script>
        // 待办事项列表
        var tasks = [
            {name:"姚龙", completed:true},
            {name:"周思宇", completed:false},
            {name:"吴雨安", completed:false},
            {name:"杨子杰", completed:false},
            {name:"钟逸", completed:false},
            {name:"陈康颖", completed:false},
            {name:"肖博文", completed:false},
            {name:"马骏", completed:false},
            {name:"张舜", completed:false},
            {name:"王康瑞", completed:false},
            {name:"谢澄", completed:true},
            {name:"郭杰文", completed:false},
            {name:"李鑫烨", completed:false},
            {name:"刘嘉轩", completed:false},
            {name:"蒲特", completed:false},
            {name:"聂翼伏 ", completed:false},
            {name:"徐洺珂", completed:false},
            {name:"魏任钧", completed:false},
            {name:"何建伟", completed:true},
            {name:"胡歆雨", completed:false},
            {name:"胡鸿磊", completed:false},
            {name:"许桓耀", completed:false},
            {name:"陈逸翔", completed:false},
            {name:"钟悦", completed:false},
            {name:"张艺丰", completed:false},
            {name:"徐祖琪", completed:false},
            {name:"刘星宇", completed:false},
        ];
        // 添加待办事项
        function addTask() {
            var input = document.getElementById("task-input");
            var task = {
                name: input.value,
                completed: false
            };
            tasks.push(task);
            input.value = '';
            updateList();
        }
        // 更新待办事项列表
        function updateList() {
            var listContainer = document.getElementById("task-list");
            listContainer.innerHTML = '';
            var count = 0;
            for (var i = 0; i < tasks.length; i++) {
                var task = tasks[i];
                var item = document.createElement("div");
                item.setAttribute("class", "task-item");
                var checkbox = document.createElement("input");
                checkbox.setAttribute("type", "checkbox");
                checkbox.checked = task.completed;
                checkbox.onclick = (function (index) {
                    return function () {
                        console.log("checkbox")
                        toggleCompleted(index);
                    }
                })(i);
                var taskName = document.createElement("span");
                taskName.innerText = task.name;
                item.appendChild(checkbox);
                item.appendChild(taskName);
                listContainer.appendChild(item);
                if (!task.completed) {
                    count++;
                }
            }
            var countElement = document.getElementById("item-count");
            countElement.innerText = "还有" + count + "人未到";
        }
        // 切换完成状态
        function toggleCompleted(index) {
            tasks[index].completed = !tasks[index].completed;
            updateList();
        }
        // 显示所有待办事项
        function showAll() {
            var listContainer = document.getElementById("task-list");
            listContainer.innerHTML = '';
            for (var i = 0; i < tasks.length; i++) {
                var task = tasks[i];
                var item = document.createElement("div");
                item.setAttribute("class", "task-item");
                var checkbox = document.createElement("input");
                checkbox.setAttribute("type", "checkbox");
                checkbox.checked = task.completed;
                checkbox.onclick = (function (index) {
                    return function () {
                        toggleCompleted(index);
                    }
                })(i);
                var taskName = document.createElement("span");
                taskName.innerText = task.name;
                item.appendChild(checkbox);
                item.appendChild(taskName);
                listContainer.appendChild(item);
                //console.log(task)
            }
        }
        showAll()
        // 显示积极的待办事项
        function showActive() {
            var activeTasks = tasks.filter(function (task) {
                return !task.completed;
            });
            var listContainer = document.getElementById("task-list");
            listContainer.innerHTML = '';
            var count = 0;
            for (var i = 0; i < activeTasks.length; i++) {
                var task = activeTasks[i];
                var item = document.createElement("div");
                item.setAttribute("class", "task-item");
                var checkbox = document.createElement("input");
                checkbox.setAttribute("type", "checkbox");
                checkbox.checked = task.completed;
                checkbox.onclick = (function (index) {
                    return function () {
                        toggleCompleted(index);
                    }
                })(i);
                var taskName = document.createElement("span");
                taskName.innerText = task.name;
                item.appendChild(checkbox);
                item.appendChild(taskName);
                listContainer.appendChild(item);
                count++;
            }
            var countElement = document.getElementById("item-count");
            countElement.innerText = "还有" + count + "人未到";
        }
        // 显示完全的待办事项
        function showCompleted() {
            var completedTasks = tasks.filter(function (task) {
                return task.completed;
            });
            var listContainer = document.getElementById("task-list");
            listContainer.innerHTML = '';
            var count = 0;
            for (var i = 0; i < completedTasks.length; i++) {
                var task = completedTasks[i];
                var item = document.createElement("div");
                item.setAttribute("class", "task-item");
                var checkbox = document.createElement("input");
                checkbox.setAttribute("type", "checkbox");
                checkbox.checked = task.completed;
                checkbox.onclick = (function (index) {
                    return function () {
                        toggleCompleted(index);
                    }
                })(i);
                var taskName = document.createElement("span");
                taskName.innerText = task.name;
                item.appendChild(checkbox);
                item.appendChild(taskName);
                listContainer.appendChild(item);
                count++;
            }
            var countElement = document.getElementById("item-count");
            countElement.innerText = "还有" + count + "人未到";
        }
        // 清除已完成的待办事项
        function clearCompleted() {
            var activeTasks = tasks.filter(function (task) {
                console.log("清除")
                return !task.completed;
            });
            tasks = activeTasks;
            updateList();
        }
    </script>
</body>
</html>